<div class="exam-topic">
  <div class="ui-g">
    <div class="ui-g-4 ui-md-4 menu">
      <div class="title">
        <p [ngClass]="{'active': topicTabActiveIndex === 0}" (click)="toggleTopicTab(0)">题库选择</p>
        <p [ngClass]="{'active': topicTabActiveIndex === 1}" (click)="toggleTopicTab(1)">自定义新增</p>
      </div>
      <div class="list">
        <p-tabView [activeIndex]="topicTabActiveIndex">
          <p-tabPanel>
            <p-scrollPanel [style]="{width: '100%', height: '57vh'}">
              <p
                class="select-list pt-3 pb-3 text-center text-gray"
                *ngFor="let item of topicData"
                (click)="topicOperate(topicOperateFlag = 'select', item)"
              >
                {{item.subjectStoreName}}
              </p>
            </p-scrollPanel>
          </p-tabPanel>
          <p-tabPanel>
            <!--            待开发中......-->
            <div class="ui-g-12">
              <div class="ui-g-3"><span style="float: right">题库选择：</span></div>
              <div class="ui-g-9">
                <span style="float: left">
                  <p-dropdown dropdownIcon="pi pi-caret-down" #dropdown placeholder="请选择题库" [options]="storeOption"
                              (click)="storeOptionChange(dropdown)"></p-dropdown>
                </span>
              </div>
            </div>
            <div class="ui-g-12">
              <div class="ui-g-3"><span style="float: right">单选题：</span></div>
              <div class="ui-g-9">
                <span style="float: left">
                  <input [(ngModel)]="randomProSubjectOption.singleSubject.number" pInputText type="number">
                </span>
              </div>
            </div>
            <div class="ui-g-12">
              <div class="ui-g-3"><span style="float: right">多选题：</span></div>
              <div class="ui-g-9">
                <span style="float: left">
                  <input [(ngModel)]="randomProSubjectOption.multiSubject.number" pInputText type="number">
                </span>
              </div>
            </div>
            <div class="ui-g-12">
              <div class="ui-g-3"><span style="float: right">判断题：</span></div>
              <div class="ui-g-9">
                <span style="float: left">
                  <input [(ngModel)]="randomProSubjectOption.judgeSubject.number" pInputText type="number">
                </span>
              </div>
            </div>
            <div class="ui-g-12">
              <div class="ui-g-3"><span style="float: right">填空题：</span></div>
              <div class="ui-g-9">
                <span style="float: left">
                  <input [(ngModel)]="randomProSubjectOption.completionSubject.number" pInputText type="number">
                </span>
              </div>
            </div>
            <div class="ui-g-12 text-center">
              <button pButton label="开始生成" style="width: auto" (click)="randomProExam()"></button>
            </div>
          </p-tabPanel>
        </p-tabView>
      </div>
    </div>
    <div class="ui-g-8 ui-md-8 content">
      <div class="topic">
        <p-scrollPanel [style]="{height:'100%'}">
          <div class="remind" *ngIf="topicTableSelect.length === 0">
            <h4 class="text-gray">请在题库中选择考试题目</h4>
          </div>
          <ng-container *ngIf="topicTableSelect.length">
            <app-topic
              *ngFor="let item of topicSelectList"
              [topicListData]="item"
              (delChange)="topicOperate(topicOperateFlag='del', $event)"
              [delable]="true">
            </app-topic>
          </ng-container>
        </p-scrollPanel>
      </div>
    </div>
  </div>
  <div class="modal">
    <p-dialog
      [closable]="false"
      [blockScroll]="true"
      [(visible)]="topicOperateModal" [style]="{width: '80vw'}"
    >
      <p-header>请选择题目</p-header>
      <div style="width: 100%; height: 70vh;overflow: hidden">
        <p-table
          [selection]="topicTableSelect"
          [value]="topicTableData"
          [scrollable]="true" scrollHeight="100%"
        >
          <ng-template pTemplate="header" let-columns>
            <tr>
              <th style="width: 4em">
                <!--            选择-->
                <!--<p-tableHeaderCheckbox></p-tableHeaderCheckbox>-->
                全选
                <p-checkbox #checkboxAll value="selectAll" [(ngModel)]="selectAllBox"
                            (click)="selectAll(checkboxAll)"></p-checkbox>
              </th>
              <th>
                题目
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
            <tr>
              <td style="width: 4em">
                <p-checkbox #checkbox [value]="1" [(ngModel)]="selectBoxes[rowIndex]"
                            (click)="select(checkbox, rowData)"></p-checkbox>
                <!--                <p-tableCheckbox #checkbox [value]="rowData"  (click)="select(checkbox, rowData)"></p-tableCheckbox>-->
              </td>
              <td>
                <app-topic [topicListData]="rowData"></app-topic>
              </td>
            </tr>
          </ng-template>
          <ng-template pTemplate="summary">
            <app-pagination [option]="topicPageOption" (clickEvent)="topicPageEvent($event)"></app-pagination>
          </ng-template>
        </p-table>
      </div>
      <p-footer>
        <button
          pButton label="取消" class="ui-button-rounded ui-button-white"
          (click)="topicOperate(this.topicOperateFlag = 'cancel')">
        </button>
        <button
          pButton class="ui-button-rounded" label="确定添加{{topicTableSelect.length}}题目至项目"
          (click)="topicOperate(this.topicOperateFlag = 'save')">
        </button>
      </p-footer>
    </p-dialog>
  </div>
</div>
